<template>
  <div class="RentAdd">
    <div class="rentDiv">
      <van-nav-bar title="发布房源">
        <template #left>
          <van-icon
            name="arrow-left"
            class="iconFont"
            @click="$router.back()"
          />
        </template>
      </van-nav-bar>

      <!-- 内容主题 -->
      <van-cell title="房源信息" class="title-cell" style="color: #21b97a" />
      <van-cell
        title="小区名称"
        is-link
        value="请输入小区名称"
        to="/rent/search"
      />

      <van-cell title="租金" value="￥/月" class="cell-in">
        <template #label>
          <input type="text" class="cell-input1" placeholder="请输入租金/月" />
        </template>
      </van-cell>
      <van-cell title="建筑面积" value="㎡" class="cell-in">
        <template #label>
          <input type="text" class="cell-input2" placeholder="请输入建筑面积" />
        </template>
      </van-cell>
      <van-cell title="户型" is-link :value="value[0]" @click="OnShowHu('0')" />

      <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          value-key="label"
          show-toolbar
          :columns="Housetypes"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
      <van-cell
        title="所在楼层"
        is-link
        :value="value[1]"
        @click="OnShowLou('1')"
      />
      <van-cell
        title="朝向"
        is-link
        :value="value[2]"
        @click="OnShowChao('2')"
      />
      <van-cell title="房屋标题" />
      <input
        class="title-input"
        type="text"
        placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
      />
      <van-cell title="房屋图像" />
      <van-uploader v-model="fileList" multiple />
      <van-cell title="房屋配置" />
      <van-grid :column-num="5" :border="false">
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
      </van-grid>
      <van-cell title="房屋描述" class="describe" />
      <div class="text-input">
        <input placeholder="请输入房屋描述信息" />
      </div>
      <div class="bottom-button">
        <van-button type="default">取消</van-button>
        <van-button type="primary">提交</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { getHousesParams } from '@/api/house.js'
export default {
  data () {
    return {
      fileList: [
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      ],
      HousePackage_activ: 'color: #21b97a;',
      showPicker: false,
      Housetypes: [],
      Floors: [],
      Orienteds: [],
      RoomTypes: [],
      Supportings: [],
      value: [],
      abcd: null
    }
  },

  created () {
    this.getHousesParams()
  },

  methods: {
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    },
    // 获取户型
    OnShowHu (e) {
      this.getHousesParams()
      this.Housetypes = this.RoomTypes
      this.showPicker = true
      this.abcd = e
    },
    // 获取楼层
    OnShowLou (e) {
      this.getHousesParams()
      this.Housetypes = this.Floors
      this.showPicker = true
      this.abcd = e
    },
    // 获取朝向
    OnShowChao (e) {
      this.getHousesParams()
      this.Housetypes = this.Orienteds
      this.showPicker = true
      this.abcd = e
    },
    onConfirm (value, index) {
      console.log(value)
      Toast(`当前值：${value.label}, 当前索引：${index}`)
      console.log(this.abcd)
      if (this.abcd === '0') {
        console.log(1)
        this.$set(this.value, 0, value.label)
      } else if (this.abcd === '1') {
        this.$set(this.value, 1, value.label)
      } else if (this.abcd === '2') {
        this.$set(this.value, 2, value.label)
      }
      this.showPicker = false
    },

    onCancel () {
      Toast('取消')
    },
    async getHousesParams () {
      try {
        const res = await getHousesParams()
        console.log(res)
        this.Floors = res.data.body.floor
        this.RoomTypes = res.data.body.roomType
        this.Supportings = res.data.body.supporting
        this.Orienteds = res.data.body.oriented
      } catch (error) {
        Toast('获取房屋信息失败！')
      }
    }
  }
}
</script>

<style scoped lang="less">
.RentAdd {
  .rentDiv {
    padding-bottom: 70px;
    background-color: #f6f5f6;
    .van-nav-bar {
      background-color: #21b97a;
      /deep/.van-nav-bar__title {
        font-size: 18px;
        color: #fff;
      }
      .iconFont {
        color: #fff;
        font-size: 18px;
      }
    }
    .title-cell {
      font-size: 15px;
    }
    .van-cell {
      border-bottom: 1px solid rgb(241, 241, 241);
    }
    .cell-in {
      position: relative;
    }
    .cell-input1 {
      position: absolute;
      border: 0;
      top: 13px;
      left: 100px;
      width: 200px;
    }
    .cell-input2 {
      position: absolute;
      border: 0;
      top: 13px;
      left: 100px;
      width: 200px;
    }
    .title-input {
      width: 100%;
      border: 0;
      font-size: 14px;
      height: 44px;
      padding-left: 15px;
      box-sizing: border-box;
    }
    .van-uploader {
      padding-left: 15px;
      padding-top: 15px;
      // width: 10px;
      width: 100%;
      box-sizing: border-box;

      background-color: #fff;
    }
    .describe {
      margin-top: 20px;
    }
    .text-input {
      background-color: #fff;
      width: 345px;
      padding-left: 18px;
      padding-top: 10px;
      width: 100%;
      box-sizing: border-box;
      height: 125px;

      input {
        border: 0;
        font-size: 14px;
      }
    }
    .bottom-button {
      position: fixed;
      bottom: 0;
      width: 100%;
      display: flex;
      .van-button {
        flex: 1;
      }
    }
  }
}
</style>
